<template>
  <div class="model-detail-container" v-loading="loading">
    <!-- 返回和页面标题 -->
    <div class="page-header">
      <div class="left">
        <el-button @click="goBack" icon="el-icon-arrow-left">返回</el-button>
        <h2 v-if="model">{{ model.name }}</h2>
      </div>
      <div class="actions" v-if="model">
        <el-button-group>
          <el-button 
            type="success" 
            :disabled="model.is_active || model.status !== 'completed'"
            @click="activateModel"
          >
            <el-icon><Check /></el-icon>激活模型
          </el-button>
          <el-button type="danger" @click="confirmDeleteModel">
            <el-icon><Delete /></el-icon>删除模型
          </el-button>
        </el-button-group>
      </div>
    </div>

    <!-- 如果模型未加载，显示加载中 -->
    <div v-if="!model && !loading" class="model-not-found">
      <el-empty description="模型不存在或已被删除" />
    </div>

    <div v-if="model" class="model-content">
      <!-- 模型基本信息卡片 -->
      <el-row :gutter="20">
        <el-col :span="24">
          <el-card class="basic-info-card">
            <template #header>
              <div class="card-header">
                <h3>基本信息</h3>
                <el-tag v-if="model.is_active" type="success">当前激活</el-tag>
                <el-tag v-else-if="model.status === 'completed'" type="info">未激活</el-tag>
                <el-tag v-else-if="model.status === 'training'" type="warning">训练中</el-tag>
                <el-tag v-else-if="model.status === 'failed'" type="danger">训练失败</el-tag>
              </div>
            </template>
            <el-descriptions :column="3" border>
              <el-descriptions-item label="模型类型">{{ model.model_type_display }}</el-descriptions-item>
              <el-descriptions-item label="状态">{{ model.status_display }}</el-descriptions-item>
              <el-descriptions-item label="创建者">{{ model.created_by_username }}</el-descriptions-item>
              <el-descriptions-item label="创建时间">{{ model.created_at_formatted }}</el-descriptions-item>
              <el-descriptions-item label="更新时间">{{ model.updated_at_formatted }}</el-descriptions-item>
              <el-descriptions-item label="模型文件">{{ getRelativePath(model.file_path) }}</el-descriptions-item>
              <el-descriptions-item label="模型描述" :span="3">{{ model.description || '无描述' }}</el-descriptions-item>
            </el-descriptions>
          </el-card>
        </el-col>
      </el-row>

      <!-- 性能指标卡片 -->
      <el-row :gutter="20" class="row">
        <el-col :span="24">
          <el-card class="performance-card" v-if="model.status === 'completed'">
            <template #header>
              <div class="card-header">
                <h3>性能指标</h3>
              </div>
            </template>
            <el-row :gutter="20">
              <el-col :xs="12" :sm="8" :md="6" :lg="4" v-for="(metric, index) in performanceMetrics" :key="index">
                <div class="metric-card">
                  <div class="metric-value">{{ formatMetricValue(metric.value) }}</div>
                  <div class="metric-name">{{ metric.name }}</div>
                </div>
              </el-col>
            </el-row>
          </el-card>
        </el-col>
      </el-row>

      <!-- 训练历史和详情 -->
      <el-row :gutter="20" class="row">
        <el-col :span="24">
          <el-card>
            <template #header>
              <div class="card-header">
                <h3>训练详情</h3>
              </div>
            </template>
            <el-tabs>
              <!-- 训练作业 -->
              <el-tab-pane label="训练作业">
                <el-table :data="trainingJobs" style="width: 100%" v-loading="loadingJobs">
                  <el-table-column prop="job_id" label="作业ID" width="180" />
                  <el-table-column prop="status_display" label="状态" width="100">
                    <template #default="scope">
                      <el-tag :type="getJobStatusType(scope.row.status)">{{ scope.row.status_display }}</el-tag>
                    </template>
                  </el-table-column>
                  <el-table-column prop="created_at_formatted" label="创建时间" width="180" />
                  <el-table-column prop="start_time_formatted" label="开始时间" width="180" />
                  <el-table-column prop="end_time_formatted" label="结束时间" width="180" />
                  <el-table-column label="操作" width="120">
                    <template #default="scope">
                      <el-button 
                        size="small" 
                        type="danger" 
                        v-if="scope.row.status === 'pending' || scope.row.status === 'running'"
                        @click="cancelTrainingJob(scope.row.id)"
                      >取消</el-button>
                      <el-button 
                        size="small" 
                        v-if="scope.row.status === 'completed' || scope.row.status === 'failed'"
                        @click="viewJobLog(scope.row)"
                      >查看日志</el-button>
                    </template>
                  </el-table-column>
                </el-table>
                <el-pagination
                  v-if="totalJobs > 0"
                  v-model:current-page="currentJobPage"
                  v-model:page-size="jobPageSize"
                  :page-sizes="[5, 10, 20]"
                  layout="total, sizes, prev, pager, next"
                  :total="totalJobs"
                  @size-change="handleJobSizeChange"
                  @current-change="handleJobCurrentChange"
                  background
                  class="pagination"
                />
              </el-tab-pane>
              
              <!-- 特征重要性 -->
              <el-tab-pane label="特征重要性" v-if="model.status === 'completed' && model.feature_importance">
                <div v-if="featureImportance.length > 0">
                  <el-table :data="featureImportance" style="width: 100%" :max-height="400">
                    <el-table-column prop="feature" label="特征名称" />
                    <el-table-column prop="importance" label="重要性" width="180">
                      <template #default="scope">
                        <div>{{ (scope.row.importance * 100).toFixed(2) }}%</div>
                      </template>
                    </el-table-column>
                    <el-table-column label="重要性图表" min-width="300">
                      <template #default="scope">
                        <div class="importance-bar">
                          <div 
                            class="bar" 
                            :style="{
                              width: `${scope.row.importance * 100}%`, 
                              backgroundColor: getFeatureColor(scope.row.importance)
                            }"
                          />
                        </div>
                      </template>
                    </el-table-column>
                  </el-table>
                </div>
                <div v-else>
                  <el-empty description="没有可用的特征重要性数据" />
                </div>
              </el-tab-pane>
              
              <!-- 混淆矩阵等可视化 -->
              <el-tab-pane label="可视化" v-if="model.status === 'completed' && model.visualization_path">
                <div class="visualizations">
                  <el-tabs tab-position="left">
                    <el-tab-pane label="混淆矩阵">
                      <div class="vis-container">
                        <img v-if="confusionMatrixUrl" :src="confusionMatrixUrl" alt="混淆矩阵" />
                        <div v-else class="vis-empty">
                          <el-empty description="暂无混淆矩阵数据" />
                        </div>
                      </div>
                    </el-tab-pane>
                    <el-tab-pane label="ROC曲线">
                      <div class="vis-container">
                        <img v-if="rocCurveUrl" :src="rocCurveUrl" alt="ROC曲线" />
                        <div v-else class="vis-empty">
                          <el-empty description="暂无ROC曲线数据" />
                        </div>
                      </div>
                    </el-tab-pane>
                    <el-tab-pane label="特征重要性图">
                      <div class="vis-container">
                        <img v-if="featureImportanceUrl" :src="featureImportanceUrl" alt="特征重要性" />
                        <div v-else class="vis-empty">
                          <el-empty description="暂无特征重要性图表" />
                        </div>
                      </div>
                    </el-tab-pane>
                    <el-tab-pane label="阈值优化">
                      <div class="vis-container">
                        <img v-if="thresholdOptUrl" :src="thresholdOptUrl" alt="阈值优化" />
                        <div v-else class="vis-empty">
                          <el-empty description="暂无阈值优化数据" />
                        </div>
                      </div>
                    </el-tab-pane>
                  </el-tabs>
                </div>
              </el-tab-pane>
            </el-tabs>
          </el-card>
        </el-col>
      </el-row>

      <!-- 预测历史 -->
      <el-row :gutter="20" class="row">
        <el-col :span="24">
          <el-card>
            <template #header>
              <div class="card-header">
                <h3>预测历史</h3>
                <el-button type="primary" size="small" @click="showPredictDialog">
                  <el-icon><Plus /></el-icon>新预测
                </el-button>
              </div>
            </template>
            <el-table :data="predictions" style="width: 100%" v-loading="loadingPredictions">
              <el-table-column prop="customer_id" label="客户ID" width="150" />
              <el-table-column label="预测结果" width="120">
                <template #default="scope">
                  <el-tag :type="scope.row.prediction_label ? 'danger' : 'success'">
                    {{ scope.row.prediction_label ? '会流失' : '不会流失' }}
                  </el-tag>
                </template>
              </el-table-column>
              <el-table-column prop="prediction_result" label="流失概率" width="120">
                <template #default="scope">
                  {{ (scope.row.prediction_result * 100).toFixed(2) }}%
                </template>
              </el-table-column>
              <el-table-column label="实际结果" width="120">
                <template #default="scope">
                  <el-tag v-if="scope.row.actual_label !== null" :type="scope.row.actual_label ? 'danger' : 'success'">
                    {{ scope.row.actual_label ? '已流失' : '未流失' }}
                  </el-tag>
                  <span v-else>未知</span>
                </template>
              </el-table-column>
              <el-table-column label="预测准确性" width="120">
                <template #default="scope">
                  <el-tag v-if="scope.row.is_correct !== null" :type="scope.row.is_correct ? 'success' : 'danger'">
                    {{ scope.row.is_correct ? '正确' : '错误' }}
                  </el-tag>
                  <span v-else>未验证</span>
                </template>
              </el-table-column>
              <el-table-column prop="created_at_formatted" label="预测时间" width="180" />
              <el-table-column prop="created_by_username" label="执行人" width="120" />
            </el-table>
            <el-pagination
              v-if="totalPredictions > 0"
              v-model:current-page="currentPredictionPage"
              v-model:page-size="predictionPageSize"
              :page-sizes="[5, 10, 20]"
              layout="total, sizes, prev, pager, next"
              :total="totalPredictions"
              @size-change="handlePredictionSizeChange"
              @current-change="handlePredictionCurrentChange"
              background
              class="pagination"
            />
            <div v-else class="empty-data">
              <el-empty description="暂无预测记录" />
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>

    <!-- 训练作业日志对话框 -->
    <el-dialog
      v-model="jobLogDialogVisible"
      title="训练作业日志"
      width="80%"
    >
      <div class="job-log" v-if="currentJob">
        <div class="job-info">
          <div class="info-item">
            <span class="label">作业ID:</span>
            <span class="value">{{ currentJob.job_id }}</span>
          </div>
          <div class="info-item">
            <span class="label">状态:</span>
            <span class="value">
              <el-tag :type="getJobStatusType(currentJob.status)">{{ currentJob.status_display }}</el-tag>
            </span>
          </div>
          <div class="info-item">
            <span class="label">开始时间:</span>
            <span class="value">{{ currentJob.start_time_formatted || '未开始' }}</span>
          </div>
          <div class="info-item">
            <span class="label">结束时间:</span>
            <span class="value">{{ currentJob.end_time_formatted || '未结束' }}</span>
          </div>
        </div>
        <div class="log-content">
          <pre>{{ currentJob.log || '暂无日志' }}</pre>
        </div>
      </div>
    </el-dialog>

    <!-- 新预测对话框 -->
    <el-dialog
      v-model="predictDialogVisible"
      title="新预测"
      width="500px"
    >
      <el-form
        ref="predictForm"
        :model="predictForm"
        :rules="predictFormRules"
        label-width="120px"
      >
        <el-form-item label="客户ID" prop="customer_id">
          <el-input v-model="predictForm.customer_id" placeholder="输入客户ID" />
        </el-form-item>
        <el-form-item label="模型">
          <el-input v-model="model.name" disabled />
          <input type="hidden" v-model="predictForm.model_id" />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="predictDialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="submitPrediction" :loading="submittingPrediction">预 测</el-button>
        </span>
      </template>
    </el-dialog>

    <!-- 预测结果对话框 -->
    <el-dialog
      v-model="predictionResultDialogVisible"
      title="预测结果"
      width="600px"
    >
      <div v-if="predictionResult" class="prediction-result">
        <div class="result-header">
          <el-tag size="large" :type="predictionResult.label ? 'danger' : 'success'">
            {{ predictionResult.label ? '预测会流失' : '预测不会流失' }}
          </el-tag>
          <div class="probability">
            流失概率: <span :class="getProbabilityClass(predictionResult.probability)">{{ (predictionResult.probability * 100).toFixed(2) }}%</span>
          </div>
        </div>
        
        <el-divider>风险评估</el-divider>
        
        <div class="risk-level">
          <span class="label">风险等级:</span>
          <span class="value">
            <el-tag :type="getRiskLevelType(predictionResult.risk_level)">
              {{ getRiskLevelText(predictionResult.risk_level) }}
            </el-tag>
          </span>
        </div>
        
        <div class="risk-factors" v-if="predictionResult.risk_factors && predictionResult.risk_factors.length > 0">
          <h4>主要风险因素:</h4>
          <el-table :data="predictionResult.risk_factors" style="width: 100%">
            <el-table-column prop="factor" label="因素" width="120" />
            <el-table-column prop="value" label="值" width="150" />
            <el-table-column prop="impact" label="影响程度" width="100">
              <template #default="scope">
                <el-tag :type="getRiskImpactType(scope.row.impact)" size="small">
                  {{ getRiskImpactText(scope.row.impact) }}
                </el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="description" label="说明" />
          </el-table>
        </div>
        <div v-else class="no-risk-factors">
          <el-empty description="未发现明显风险因素" />
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive, computed, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { ElMessage, ElMessageBox } from 'element-plus'
import { Check, Delete, Plus } from '@element-plus/icons-vue'
import { 
  getModelDetail, 
  activateModel as activateModelApi, 
  deleteModel,
  getModelTrainingJobs,
  cancelModelTrainingJob as cancelJob,
  getModelPredictions,
  predictCustomer
} from '@/api/modules/models'

const route = useRoute()
const router = useRouter()
const modelId = route.params.id

// 页面状态
const loading = ref(true)
const model = ref(null)
const loadingJobs = ref(false)
const loadingPredictions = ref(false)

// 训练作业
const trainingJobs = ref([])
const currentJobPage = ref(1)
const jobPageSize = ref(10)
const totalJobs = ref(0)
const jobLogDialogVisible = ref(false)
const currentJob = ref(null)

// 预测记录
const predictions = ref([])
const currentPredictionPage = ref(1)
const predictionPageSize = ref(10)
const totalPredictions = ref(0)
const predictDialogVisible = ref(false)
const predictionResultDialogVisible = ref(false)
const submittingPrediction = ref(false)
const predictionResult = ref(null)
const predictForm = reactive({
  customer_id: '',
  model_id: ''
})
const predictFormRules = {
  customer_id: [
    { required: true, message: '请输入客户ID', trigger: 'blur' }
  ]
}

// 可视化URL
const baseUrl = computed(() => {
  return 'http://localhost:8000'
})
const confusionMatrixUrl = computed(() => {
  if (!model.value || !model.value.visualization_path) return null
  return `${baseUrl.value}/${model.value.visualization_path}/confusion_matrix.png`
})
const rocCurveUrl = computed(() => {
  if (!model.value || !model.value.visualization_path) return null
  return `${baseUrl.value}/${model.value.visualization_path}/roc_curve.png`
})
const featureImportanceUrl = computed(() => {
  if (!model.value || !model.value.visualization_path) return null
  return `${baseUrl.value}/${model.value.visualization_path}/feature_importance.png`
})
const thresholdOptUrl = computed(() => {
  if (!model.value || !model.value.visualization_path) return null
  return `${baseUrl.value}/${model.value.visualization_path}/threshold_optimization.png`
})

// 特征重要性
const featureImportance = computed(() => {
  if (!model.value || !model.value.feature_importance) return []
  try {
    return typeof model.value.feature_importance === 'string' 
      ? JSON.parse(model.value.feature_importance) 
      : model.value.feature_importance
  } catch (e) {
    console.error('解析特征重要性失败:', e)
    return []
  }
})

// 性能指标
const performanceMetrics = computed(() => {
  if (!model.value || model.value.status !== 'completed') return []
  
  return [
    { name: '准确率', value: model.value.accuracy },
    { name: '精确率', value: model.value.precision },
    { name: '召回率', value: model.value.recall },
    { name: 'F1分数', value: model.value.f1_score },
    { name: 'AUC', value: model.value.auc },
    { name: '决策阈值', value: model.value.threshold },
    { name: '训练时间', value: model.value.training_time, format: 'time' }
  ]
})

// 生命周期钩子
onMounted(() => {
  fetchModelDetail()
})

// 方法
const fetchModelDetail = async () => {
  loading.value = true
  try {
    const res = await getModelDetail(modelId)
    model.value = res
    predictForm.model_id = res.id
    
    // 加载训练作业和预测记录
    await fetchTrainingJobs()
    await fetchPredictions()
  } catch (error) {
    console.error('获取模型详情失败', error)
    ElMessage.error('获取模型详情失败')
  } finally {
    loading.value = false
  }
}

const fetchTrainingJobs = async () => {
  loadingJobs.value = true
  try {
    const params = {
      model: modelId,
      page: currentJobPage.value,
      page_size: jobPageSize.value
    }
    
    const res = await getModelTrainingJobs(params)
    trainingJobs.value = res.results
    totalJobs.value = res.count
  } catch (error) {
    console.error('获取训练作业失败', error)
  } finally {
    loadingJobs.value = false
  }
}

const fetchPredictions = async () => {
  loadingPredictions.value = true
  try {
    const params = {
      model: modelId,
      page: currentPredictionPage.value,
      page_size: predictionPageSize.value
    }
    
    const res = await getModelPredictions(params)
    predictions.value = res.results
    totalPredictions.value = res.count
  } catch (error) {
    console.error('获取预测记录失败', error)
  } finally {
    loadingPredictions.value = false
  }
}

const goBack = () => {
  router.push('/models')
}

const activateModel = async () => {
  try {
    await activateModelApi(modelId)
    ElMessage.success('模型已激活')
    fetchModelDetail()
  } catch (error) {
    console.error('激活模型失败', error)
    ElMessage.error('激活模型失败: ' + (error.response?.data?.error || '未知错误'))
  }
}

const confirmDeleteModel = () => {
  ElMessageBox.confirm('此操作将永久删除该模型, 是否继续?', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(async () => {
    try {
      await deleteModel(modelId)
      ElMessage.success('删除成功')
      router.push('/models')
    } catch (error) {
      console.error('删除模型失败', error)
      ElMessage.error('删除模型失败: ' + (error.response?.data?.error || '未知错误'))
    }
  }).catch(() => {})
}

const cancelTrainingJob = async (jobId) => {
  try {
    await cancelJob(jobId)
    ElMessage.success('作业已取消')
    fetchTrainingJobs()
  } catch (error) {
    console.error('取消作业失败', error)
    ElMessage.error('取消作业失败: ' + (error.response?.data?.error || '未知错误'))
  }
}

const viewJobLog = (job) => {
  currentJob.value = job
  jobLogDialogVisible.value = true
}

const handleJobSizeChange = (val) => {
  jobPageSize.value = val
  fetchTrainingJobs()
}

const handleJobCurrentChange = (val) => {
  currentJobPage.value = val
  fetchTrainingJobs()
}

const handlePredictionSizeChange = (val) => {
  predictionPageSize.value = val
  fetchPredictions()
}

const handlePredictionCurrentChange = (val) => {
  currentPredictionPage.value = val
  fetchPredictions()
}

const showPredictDialog = () => {
  predictForm.customer_id = ''
  predictDialogVisible.value = true
}

const submitPrediction = async () => {
  const predictFormRef = ref(null)
  if (predictFormRef.value) {
    await predictFormRef.value.validate(async (valid) => {
      if (valid) {
        submittingPrediction.value = true
        try {
          const res = await predictCustomer({
            customer_id: predictForm.customer_id,
            model_id: predictForm.model_id
          })
          
          predictionResult.value = res
          predictDialogVisible.value = false
          predictionResultDialogVisible.value = true
          
          // 刷新预测记录
          await fetchPredictions()
        } catch (error) {
          console.error('预测失败', error)
          ElMessage.error('预测失败: ' + (error.response?.data?.error || '未知错误'))
        } finally {
          submittingPrediction.value = false
        }
      }
    })
  }
}

// 辅助方法
const getJobStatusType = (status) => {
  switch (status) {
    case 'pending':
      return 'info'
    case 'running':
      return 'warning'
    case 'completed':
      return 'success'
    case 'failed':
      return 'danger'
    default:
      return 'info'
  }
}

const formatMetricValue = (value) => {
  if (typeof value === 'number') {
    return (value * 100).toFixed(2) + '%'
  }
  return value
}

const getFeatureColor = (importance) => {
  if (importance > 0.2) return '#F56C6C'
  if (importance > 0.1) return '#E6A23C'
  if (importance > 0.05) return '#409EFF'
  return '#67C23A'
}

const getProbabilityClass = (probability) => {
  if (probability >= 0.7) return 'high-risk'
  if (probability >= 0.3) return 'medium-risk'
  return 'low-risk'
}

const getRiskLevelType = (level) => {
  switch (level) {
    case 'high':
      return 'danger'
    case 'medium':
      return 'warning'
    case 'low':
      return 'success'
    default:
      return 'info'
  }
}

const getRiskLevelText = (level) => {
  switch (level) {
    case 'high':
      return '高风险'
    case 'medium':
      return '中风险'
    case 'low':
      return '低风险'
    default:
      return '未知'
  }
}

const getRiskImpactType = (impact) => {
  switch (impact) {
    case 'high':
      return 'danger'
    case 'medium':
      return 'warning'
    case 'low':
      return 'info'
    default:
      return 'info'
  }
}

const getRiskImpactText = (impact) => {
  switch (impact) {
    case 'high':
      return '高'
    case 'medium':
      return '中'
    case 'low':
      return '低'
    default:
      return '未知'
  }
}

// 获取相对路径
const getRelativePath = (path) => {
  if (!path) return '无文件'
  // 判断是否已经是相对路径
  if (path.startsWith('ml_models/') || path.startsWith('/ml_models/')) {
    return path
  }
  // 去掉系统绝对路径前缀
  const baseDirs = [
    'F:\\Code\\毕业设计\\电信客户流失预警建模-林诗妮\\CustomerChurn\\',
    'F:/Code/毕业设计/电信客户流失预警建模-林诗妮/CustomerChurn/',
    '/f/Code/毕业设计/电信客户流失预警建模-林诗妮/CustomerChurn/'
  ]
  
  for (const baseDir of baseDirs) {
    if (path.startsWith(baseDir)) {
      return path.substring(baseDir.length)
    }
  }
  
  return path
}
</script>

<style lang="scss" scoped>
.model-detail-container {
  padding: 20px;
  
  .page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    
    .left {
      display: flex;
      align-items: center;
      gap: 15px;
      
      h2 {
        margin: 0;
        font-weight: 500;
      }
    }
  }
  
  .model-not-found {
    margin-top: 100px;
    display: flex;
    justify-content: center;
  }
  
  .model-content {
    .row {
      margin-top: 20px;
    }
    
    .basic-info-card {
      .card-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        
        h3 {
          margin: 0;
          font-size: 16px;
          font-weight: 500;
        }
      }
    }
    
    .performance-card {
      .metric-card {
        padding: 15px;
        text-align: center;
        margin-bottom: 10px;
        border-radius: 4px;
        background-color: #f5f7fa;
        
        .metric-value {
          font-size: 24px;
          font-weight: 600;
          margin-bottom: 5px;
        }
        
        .metric-name {
          font-size: 14px;
          color: #606266;
        }
      }
    }
    
    .visualizations {
      .vis-container {
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 20px;
        min-height: 400px;
        
        img {
          max-width: 100%;
          max-height: 400px;
        }
        
        .vis-empty {
          width: 100%;
        }
      }
    }
    
    .importance-bar {
      width: 100%;
      height: 20px;
      background-color: #f5f7fa;
      border-radius: 10px;
      overflow: hidden;
      
      .bar {
        height: 100%;
        border-radius: 10px;
      }
    }
    
    .pagination {
      margin-top: 20px;
      text-align: center;
    }
    
    .empty-data {
      padding: 30px 0;
    }
  }
  
  .job-log {
    .job-info {
      display: flex;
      flex-wrap: wrap;
      gap: 15px;
      margin-bottom: 15px;
      background-color: #f5f7fa;
      padding: 15px;
      border-radius: 4px;
      
      .info-item {
        .label {
          font-weight: 500;
          margin-right: 5px;
        }
      }
    }
    
    .log-content {
      background-color: #1e1e1e;
      color: #d4d4d4;
      padding: 15px;
      border-radius: 4px;
      max-height: 400px;
      overflow-y: auto;
      
      pre {
        margin: 0;
        white-space: pre-wrap;
        word-wrap: break-word;
      }
    }
  }
  
  .prediction-result {
    .result-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 20px;
      
      .probability {
        font-size: 18px;
        
        .high-risk {
          color: #F56C6C;
          font-weight: 600;
        }
        
        .medium-risk {
          color: #E6A23C;
          font-weight: 600;
        }
        
        .low-risk {
          color: #67C23A;
          font-weight: 600;
        }
      }
    }
    
    .risk-level {
      margin-bottom: 15px;
      
      .label {
        font-size: 16px;
        margin-right: 10px;
      }
    }
    
    .risk-factors {
      h4 {
        margin-bottom: 15px;
      }
    }
    
    .no-risk-factors {
      margin-top: 20px;
    }
  }
}
</style> 